<template>
  <a-card class="general-card">
    <a-form v-model="checkForm" class="formHeader">
      <a-row justify="start" :gutter="24">
        <a-col class="formHeader-criteria">
          <a-row :gutter="16">
            <a-col span="8">
              <a-form-item label="工单号" label-col-flex="80px">
                <a-input v-model="checkForm.number" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="订单号" label-col-flex="80px">
                <a-input v-model="checkForm.orderNumber" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="品号" label-col-flex="80px">
                <a-input v-model="checkForm.itemNo" allow-clear/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col span="8">
              <a-form-item label="工艺编号" label-col-flex="80px">
                <a-input v-model="checkForm.craft" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="员工姓名" label-col-flex="80px">
                <a-input v-model="checkForm.name" allow-clear/>
              </a-form-item>
            </a-col>
<!--            <a-col span="8">-->
<!--              <a-form-item label="工作中心" label-col-flex="80px">-->
<!--                <a-input v-model="checkForm.workCenter" allow-clear/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
            <a-col span="8">
              <a-form-item label="生产时间" label-col-flex="80px">
                <a-range-picker v-model="timeRange" @change="changeTime"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col class="formHeader-btn">
          <a-space direction="vertical" :size="20">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-loop />
              </template>
              <template #default>重置</template>
            </a-button>
            <a-button @click="outExcleFun" type="primary" status="success">
              <template #icon>
                <icon-loop />
              </template>
              <template #default>导出Excel</template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>


    <!-- 用户显示区域 -->
    <div class="user-area">
      <vxe-table
          ref="tableRef"
          :data="data"
          size="mini"
          height="100%"
          :loading="loadingFlag"
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          stripe
          border
      >
        <vxe-column field="TE001" title="派工单号"  show-overflow align="center" min-width="180" sortable>
          <template #default="{ row }"> {{ row.TE001 }}</template>
        </vxe-column>
        <vxe-column field="TE006" title="工单号"  show-overflow align="center" min-width="150" sortable>
          <template #default="{ row }"> {{ row.TE006 }}</template>
        </vxe-column>
        <vxe-column field="TE023" title="派工时间"  show-overflow align="center" min-width="120" sortable>
          <template #default="{ row }"> {{ row.TE023 }}</template>
        </vxe-column>
        <vxe-column field="TE004" title="人员编号"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.TE004 }}</template>
        </vxe-column>
        <vxe-column field="UDF07" title="人员名称"  align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF07 }}</template>
        </vxe-column>
        <vxe-column field="TE017" title="品号"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.TE017 }}</template>
        </vxe-column>
        <vxe-column field="TE018" title="品名"  show-overflow align="center" min-width="150" sortable>
          <template #default="{ row }"> {{ row.TE018 }}</template>
        </vxe-column>
        <vxe-column field="TE019" title="规格"  show-overflow align="center" min-width="150" sortable>
          <template #default="{ row }"> {{ row.TE019 }}</template>
        </vxe-column>
        <vxe-column field="TE020" title="单位"  align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.TE020 }}</template>
        </vxe-column>
        <vxe-column field="TE009" title="工艺编号"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.TE009 }}</template>
        </vxe-column>
        <vxe-column field="UDF09" title="子工序"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF09 }}</template>
        </vxe-column>
        <vxe-column field="UDF10" title="子工艺"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF10 }}</template>
        </vxe-column>
        <vxe-column field="UDF54" title="废料"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF54 }}</template>
        </vxe-column>
        <vxe-column field="UDF55" title="工费"  align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF55 }}</template>
        </vxe-column>
        <vxe-column field="UDF56" title="不良"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF56 }}</template>
        </vxe-column>
        <vxe-column field="TE015" title="备注"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.TE015 }} </template>
        </vxe-column>
        <vxe-column field="UDF04" title="订单号"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF04 }} </template>
        </vxe-column>
        <vxe-column field="UDF57" title="订单数量"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.UDF57 }} </template>
        </vxe-column>
        <vxe-column field="TE011" title="派工数量"  show-overflow align="center" min-width="100" sortable>
          <template #default="{ row }"> {{ row.TE011 }} </template>
        </vxe-column>
        <vxe-column title="操作" show-overflow align="center" fixed="right" width="150">
          <template #default="{ row, rowIndex }">
            <a-space>
              <a-button type="primary" size="mini" @click="toDetail(row)">查看</a-button>
              <a-button v-can-delete type="primary" size="mini" status="danger" @click="del(row, rowIndex)">删除</a-button>
            </a-space>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="getTable">
    </vxe-pager>

    <!-- 提示确认删除 -->
    <a-modal v-model:visible="delVisible" title-align="center" @ok="delHandleOk" @cancel="delVisible=false">
      <template #title> 删除提示 </template>
      <div>您确定要删除吗</div>
    </a-modal>
  </a-card>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './dispatchQuery.ts';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';

export default {
  components: {
    formButtonGroup,
  },
  setup() {
    const {
      base,
      getTable,
      reset,
      outExcleFun,
      toDetail,
      del,
      delHandleOk,
      search,
      changeTime,
    } = importConfig();

    return {
      ...toRefs(base),
      getTable,
      reset,
      outExcleFun,
      toDetail,
      del,
      delHandleOk,
      search,
      changeTime,
    };
  },
};
</script>

<style lang="less" scoped>
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;

  }
}

:deep(.arco-divider-horizontal) {
  margin: 10px 0;
}

.add-user-btn {
  display: flex;
}

.user-area {
  margin-top: 20px;
  height: calc(100vh - 405px);

  :deep(.arco-table-td-content) {
    text-align: center;
  }
}
</style>
